<template>
    <view>
        <!-- 头像昵称区域 -->
        <view class="top-top">
        <view class="top-box">
            <image :src="userinfo.avatarUrl" class="avatar"></image>
            <view class="top-a">
                <view class="nickname">{{userinfo.nickName}}</view>
                <view class="send_time">{{ sendTime }}</view>
            </view>
        </view>
        <view class="requireNum">需人数&nbsp;{{ requiredPeople }}&nbsp;
          <br>
          已加入&nbsp;{{ joinPeople }}&nbsp;
        </view>
      </view>
        <!-- 标题与组团详情 -->
        <view class="tuan_info">
            <view class="tuan_title">{{ tuanTitle }}</view>
            <view class="tuan_detail">
              <text>
                {{ tuanDetail }}
              </text>
              </view>
            <view class="image-container" v-for="(image, index) in images" :key="index">
                <image :src="image" class="tuan-image" mode="widthFix"></image>
            </view>
            <!-- 添加: 标签数组显示 -->
            <view class="tags-container" v-if="tagName && tagName.length > 0">
                <view class="tag" v-for="(tag, tagIndex) in tagName" :key="tagIndex">{{ tag }}</view>
            </view>
            <view class="twoTime">
        开始时间：{{ tuanDto.tuan.beginTime }}
        <br>
        结束时间：{{ tuanDto.tuan.endTime }}
      </view>
        </view>
        <!-- 评论组件 -->
      <group-comments :tuanId="tuanId"></group-comments>
        <!-- 结束组团按钮 -->
      <view class="end-group-btn-container">
        <button v-if="tuanStatus===1" class="end-group-btn" @click="endGroup">结束组团</button>
        <button v-if="tuanStatus===2" class="end-group-btn2">组团已结束</button>
      </view>
    </view>
    
</template>

<script>
// 按需导入 mapState 辅助函数
import {
    mapState,
    mapMutations
  } from 'vuex'


export default {
    computed: {
      // 将 m_user 模块中的 userinfo 映射到当前页面中使用
      ...mapState('m_user', ['userinfo']),
    },
  data() {
    return {
      tuanId: "",
      tuanTitle: "",
      tuanDetail: "",
      sendTime: "",
      images: [], // 确保 images 初始化为一个空数组
      tagName: [],
      requiredPeople: "",
      joinPeople: "",
      tuanDto: {}, // 用于存储后端返回的 tuanDto 对象
      tuanStatus: "",
    };
  },

  onLoad(options) {
      console.log("Received options:", options); // 添加: 输出 options 以调试
      if (options && options.tuanId) {
        const tuanId = parseInt(options.tuanId, 10); // 添加: 确保 tuanId 是数字类型
        if (!isNaN(tuanId)) {
          console.log("TuanId:", tuanId);
          uni.$http
            .get(`/tuan/getTuanById/?tuanId=${tuanId}`) // 发送请求获取 tuanDto 对象
            .then((res) => {
              console.log("获取组团信息", res.data);
              const responseData = res.data;
              if (responseData.code === 200) {
                this.tuanDto = responseData.data; // 存储后端返回的 tuanDto 对象
                this.tuanId = this.tuanDto.tuan.tuanId;
                this.tuanTitle = this.tuanDto.tuan.tuanTitle; // 初始化 tuanTitle
                this.tuanDetail = this.tuanDto.tuan.tuanDetail; // 初始化 tuanDetail
                this.sendTime = this.tuanDto.tuan.sendTime; //发布时间
                this.images = this.tuanDto.images || []; // 初始化 images 并确保其为数组
                this.tagName = this.tuanDto.tagName; // 初始化 tagName
                this.tuanStatus = this.tuanDto.tuan.tuanStatus;
                if (this.tagName && this.tagName.length > 0) {
                  this.tagInputs = Array.from({ length: 5 }, (_, index) =>
                    index < this.tagName.length ? this.tagName[index] : ""
                  );
                }
                this.requiredPeople = this.tuanDto.tuan.requiredPeople; // 初始化 requiredPeople
                this.joinPeople = this.tuanDto.tuan.joinPeople; //初始化已加入人数
              } else {
                console.error("获取组团信息失败", responseData);
              }
            })
            .catch((err) => {
              console.error("获取组团信息失败", err);
            });
        } else {
          console.warn("无效的组团id:", options.tuanId); // 添加: 处理无效的 tuanId
        }
      } else {
        console.warn("缺少组团id"); // 添加: 处理缺少 tuanId 的情况
      }
    },
    
  methods: {
    endGroup() {
      // 添加结束组团的逻辑
      console.log("结束组团按钮被点击");
      // 这里可以添加结束组团的具体逻辑
      uni.showModal({
        title: '结束组团',
        content: '确定要结束该组团吗？',
        success: (res) => {
          if (res.confirm) {
            // 用户点击确定，执行结束组团的逻辑
            uni.$http
              .put(`/tuan/endTuan/?tuanId=${this.tuanId}`)
              .then((res) => {
                const responseData = res.data;
                if (responseData.code === 200) {
                  this.tuanStatus = 2;
                  // 显示成功提示
                  uni.showToast({
                    title: '组团已结束',
                    icon: 'none',
                    duration: 2000
                  });
                  // 跳转到首页
                  uni.switchTab({
                    url: '/subpkg/my_send/my_send'
                  });
               } else {
                  uni.showToast({
                    title: '结束组团失败',
                    icon: 'none',
                    duration: 2000
                  });
               }
            })
              .catch((err) => {
                  console.error('结束组团失败:', err);
                  uni.showToast({
                    title: '结束组团失败',
                    icon: 'none',
                    duration: 2000
                  });
              });
          }
        }

      })


    },
  },
};
</script>

<style lang="scss">
    page {
        background-color: white;
        padding-bottom: 60px;
    }

    .top-top {
        display: flex;
        margin-top: 10px;
        margin-left: 5px;
        margin-right: 5px;
        justify-content: space-between; // 添加: 使内容两端对齐

        .requireNum{
          margin-top: 11px;
          color: #938e8e;
          font-size: 11px;
          text-align: right; // 添加: 文本右对齐
          margin-left: auto; // 添加: 使元素靠右
          margin-right: 15px;
          line-height: 18px;
        }
    }
    
    .tuan_info{
        padding: 15px;

        .tuan_title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .tuan_detail {
            margin-bottom: 20px;
        }

        .image-container {
            margin-bottom: 8px;

            .tuan-image{
                width: 100%;
                display: block;
                border-radius: 7px;
            }
        }

    }

    .top-box {
      height: 95rpx;
      width: 205px;
      display: flex;
      margin-top: 8px;
      padding-left: 8px;
   
      position: relative;
    

      .avatar {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }

      .top-a {
        display: flex;
        flex-direction: column;
        padding-left: 30rpx;

        .nickname {
          color: #1d1c1c;
          font-size: 16px;
          max-width: 130px; /* 设置最大宽度 */
          white-space: nowrap; /* 防止换行 */
          overflow: hidden; /* 隐藏溢出内容 */
          text-overflow: ellipsis; /* 省略号显示 */
        }

        .send_time{
          color: #6a6666;
          font-size: 12px;
          margin-top: 5px;
        }
      }

    }

    .tags-container {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;

        .tag {
            background-color: #f0f0f0;
            color: #333;
            padding: 5px 10px;
            border-radius: 15px;
            margin-right: 5px;
            margin-bottom: 5px;
            font-size: 14px;
        }
    }
// 添加结束组团按钮样式
.end-group-btn-container {
  padding-top: 5px;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 1000; // 确保按钮在最上层
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.171);
}

.end-group-btn {
  width: 90%;
  height: 90%;
  font-size: 17px;
  color: rgb(96, 96, 96);
  background-color: #fbd269;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.171);
  border: none;
  text-align: center;
  border-radius: 40px;
}

.end-group-btn2 {
  width: 90%;
  height: 90%;
  font-size: 17px;
  color: rgb(96, 96, 96);
  background-color: #d7d7d7;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.171);
  border: none;
  text-align: center;
  border-radius: 40px;
}
.twoTime {
  color: #6a6666;
      font-size: 12px;
      margin-top: 5px;
}
</style>